<template>
  <el-card style="width: 80%; height: 95%; margin:20px auto 0px; padding: 5px 10px; position: relative">
    <div style="font-size: 18px;color: black; margin-bottom: 20px;">
      <button style="width: 7px; height: 20px; border-radius: 3px; background-color: rgb(41, 132, 248); border-width: 0; padding: 0"></button>
      <span style="margin-left: 10px;">标签管理</span>
    </div>
    <el-form label-width="70px" label-position="left" :inline="true" style="position: relative">
      <el-form-item>
        <el-input placeholder="请输入关键字" style="width:400px;" :suffix-icon="Search" v-model="content"></el-input>
      </el-form-item>
      <el-form-item  style="float: right; margin-right: 0;">
        <el-button>新增标签</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="DiseaseArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)"  ref="tableRef" style="width: 100%" height=600
              :header-cell-style="{ textAlign: 'center', background: 'rgb(249,249,249)', height: '55px', color: 'rgb(51,51,51)', fontWeight: '200'}"
              :row-style="{ height:'55px' }"
              :cell-style="{ textAlign: 'center', padding:'0px' }"
              :row-class-name="setTableRow">
      <el-table-column type="index" label="编号" width="80"/>
      <el-table-column prop="name" label="标签名称" :width="flexColumnWidth('name',DiseaseArr)"/>
      <el-table-column prop="uploader" label="添加人" :width="flexColumnWidth('uploader',DiseaseArr)"/>
      <el-table-column prop="updateTime" label="最后修改时间" :width="flexColumnWidth('updateTime',DiseaseArr)"/>
      <el-table-column prop="status" label="使用状态">
        <template #default="scope">
          <el-switch class="main-el-switch"
                     active-value="1" inactive-value="0"
                     active-color="#13ce66" inactive-color="rgb(204,204,204)"
                     active-text="启用" inactive-text="禁用"
                     v-model="scope.row.status"
                     @change="changeStatus(scope.row.id,scope.row.status)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary">编辑</el-button>
          <el-button link type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :total="DiseaseArr.length"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :style="paginationStyle">
  </el-pagination>
  </el-card>
</template>

<script setup>
import {onMounted, ref, nextTick, onUnmounted} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import { Search } from '@element-plus/icons-vue'

const content = ref('');
const DiseaseArr = ref([
  { name: '王安然', uploader: '李小明', updateTime: '2020/10/09 10:09:09', status: '1' },
  { name: '王安然然', uploader: '李小明明', updateTime: '2020/10/09 10:09:09', status: '0' },
  { name: '王安然然然', uploader: '李小明明明', updateTime: '2020/10/09 10:09:09', status: '0' },
  { name: '王安然然然然', uploader: '李小明明明明', updateTime: '2020/10/09 10:09:09', status: '1' },
  { name: '王安然然然然然', uploader: '李小明明明明明', updateTime: '2020/10/09 10:09:09', status: '0' },
  { name: 'asdfdsfcsafdsadsadsad', uploader: '李小明', updateTime: '2020/10/09 10:09:09', status: '1' },
  { name: '王安然', uploader: '李小明李小明', updateTime: '2020/10/09 10:09:09', status: '0' },
  { name: '王安然', uploader: '李小明李小明李小明', updateTime: '2020/10/09 10:09:09', status: '1' },
  { name: '王安然', uploader: '李小明李小明李小明李小明', updateTime: '2020/10/09 10:09:09', status: '0' },
  { name: '王安然', uploader: '李小明李小明李小明李小明李小明', updateTime: '2020/10/09 10:09:09', status: '1' },
  { name: '王安然', uploader: '李小明李小明李小明李小明李小明李小明', updateTime: '2020/10/09 10:09:09', status: '1' },
]);

const tableRef = ref(null);
const paginationStyle = ref({});

const loadDisease = ()=>{
  axios.get(BASE_URL+'/v1/disease/select?' + content.value).then((response)=>{
    console.log(response.data);
    if(response.data.code == 2000){
      DiseaseArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

const getOffsetTopRelativeToDocument = (element) => {
  const rect = element.getBoundingClientRect();
  return rect.top + window.pageYOffset;
};

const getTableBottomPosition = () => {
  const tableElement = tableRef.value.$el;
  const bottomPosition = getOffsetTopRelativeToDocument(tableElement) + tableElement.offsetHeight;
  console.log("Table bottom Position:", bottomPosition);

  if (bottomPosition < (window.innerHeight - 50)) {
    paginationStyle.value = { textAlign:'center', position:'absolute', bottom:'5px', right:'5px' };
  } else {
    paginationStyle.value = { textAlign:'center', marginTop:'20px', display:'flex',  justifyContent:'flex-end'};
  }
};

onMounted(() => {
  //loadDisease();
  nextTick(() => {
    getTableBottomPosition();
  });
  // 监听窗口大小变化
  window.addEventListener('resize', getTableBottomPosition);
});

// 清除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', getTableBottomPosition);
});

const currentPage = ref('1'); //当前页 刷新后默认显示第一页
const pageSize = ref('10'); //每一页显示的数据量 此处每页显示6条数据

const handleCurrentChange = (page) => {
  currentPage.value = page; //每次点击分页按钮，当前页发生变化
}

const changeStatus = (userId,status)=>{
  // axios.post(BASE_URL+'/v1/user/update/status/'+userId+'/'+status)
  //     .then((response)=>{
  //       if(response.data.code == 2000){
  //         ElMessage.success('修改状态成功!');
  //       }else{
  //         ElMessage.error(response.data.msg);
  //       }
  // })
}


const setTableRow = (row) => {
  if (row.rowIndex % 2 == 0) {
    return 'j-row';
  } else {
    return 'o-row';
  }
  return '';
}


</script>

<style scoped>
  :deep(.el-form-item__label) {
    height: 45px;
    line-height: 45px;
    color: #999999;
  }

  :deep(.el-input__wrapper) {
    height: 45px;
  }

  :deep(.el-form .el-input) {
    width: 220px;
    .el-input__inner{
      border:0;
      height: 45px;
    }
    .el-input__icon{
      height: 45px;
      font-size: 18px;
    }
  }

  .el-form .el-button {
    width: 110px;
    height: 45px;
    font-size: 16px;
    border-radius: 6px;
    background-color: rgb(41,132,248);
    color: white;
  }
  .el-form .el-button:hover {
    background-color: rgb(84,156,249) !important;
    color: white !important;
  }


  :deep(.el-table) {
    background: white;
    .j-row {
      background: white;
    }
    .o-row {
      background: rgb(242,247,251);
    }
  }

  :deep(.el-pagination .el-input) {
    .el-input__wrapper{
      height: 35px;
      .el-input__inner{
        border:0;
        height: 35px;
      }
    }
  }

  :deep(.main-el-switch) {
    position: relative;

    .el-switch__core {
      height: 25px;
      border-radius: 12px;
      width: 65px;
      background: rgb(204,204,204);
      border: 0;
      &:after {
        left: 4px;
        top: 5px;
      }
    }

    &.el-switch {
      &.is-checked {
        .el-switch__core {
          border: 0;
          background: #13ce66;
          &:after {
            margin-left: -90px;
            left: 100%;
          }
        }
      }
    }

    &.is-checked {
      .el-switch__label--left {
        opacity: 0;
      }

      .el-switch__label--right {
        opacity: 1;
      }
    }

    .el-switch__label {
      position: absolute;
      color: #fff;
      top: 5px;
    }

    .el-switch__label--left {
      right: 0;
      z-index: 1;
      margin-right: 8px;
    }

    .el-switch__label--right {
      left: 0;
      opacity: 0;
      margin-left: 8px;
    }
  }

</style>